<template>
<div>
    <ul class="user">
        <router-link v-for="(item,index) in userList" :key="index" :to="'/user/'+item.tip+'/'+item.id" tag="li">
            <a>{{item.userName}}</a>
        </router-link>
    </ul>
    <ul v-if="userInfo.userName">
        <li>姓名：{{userInfo.userName}}</li>
        <li>性别：{{userInfo.sex}}</li>
        <li>爱好：{{userInfo.hobby}}</li>
    </ul>
    <p style="margin:10px 0;" v-if="userInfo.userName">
        <router-link exact :to="{path: '', query:{info:'pages'}}">他的文章</router-link>
        <router-link exact :to="{path: '', query:{info:'save'}}">他的收藏</router-link>
        <p>{{$route.query}}</p>
    </p>
    
</div>
</template>

<script>
let data = [
    {
      id:1,
      tip:'vip',
      userName:"leo1",
      sex:'男',
      hobby:'写代码'
    },
    {
      id:2,
      tip:'vip',
      userName:"leo2",
      sex:'男',
      hobby:'唱歌'
    },
    {
      id:3,
      tip:'common',
      userName:"leo3",
      sex:'男',
      hobby:'读书'
    }
]

export default {
    data(){
        return {
            userList: data,
            userInfo: {},
        }
    },
    watch:{
        $route(){
            // 路径发生变化，$route会重新赋值，监控了这个属性，会执行这个函数
          this.getData()
        }
    },
    created(){
        // 渲染这个组件会调用一次这个生命周期函数
        // 复用这个组件，这个函数不会再次被调用了
        // 地址一旦发生变化，$route会重新生成一个路由信息对象
        this.getData()
    },
    methods:{
        getData(){
            let id = this.$route.params.userId;
            if(id){
                 this.userInfo = this.userList.filter((item)=>{
                    return item.id == id
                    console.log(item.id)
                })[0]
            }else{
                this.userInfo = {}
            }
           
        }
        
    }
}
</script>

<style>
.user{ text-align: center; padding: 10px 0;}
.user li{ display: inline-block; padding: 5px 10px; margin: 0 10px;}
</style>